<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<title>幸运大转盘</title>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="turntable">
	<div class="turntable-title"></div>
	<div class="turntable-wrap" id="turntable">
		<img id="jq-turntable-img" class="ui-turntable" src="css/images/img-turntable.png">
		<img id="jq-turntable-tip" class="ui-turntable-tip" src="css/images/img-turntable-tip.png">
	</div>
	<p class="num-text">您还有<em>1</em>次抽奖机会</p>
	<div class="award-info">
		<ul class="tabs">
			<li class="current"><span>奖项<span class="arrow"></span></span></li>
			<li><span>说明<span class="arrow"></span></span></li>
			<li><span>中奖名单<span class="arrow"></span></span></li>
		</ul>
		<div class="tabs-content award-list">
			<table>
				<tbody>
					<tr>
						<td>一等奖</td>
						<td>X.XM</td>
					</tr>
					<tr>
						<td>一等奖</td>
						<td>X.XM</td>
					</tr>
				</tbody>
			</table>
		</div>
		<ol class="tabs-content explain">
			<li>不要玩游戏</li>
			<li>不要上网</li>
			<li>不要斗殴</li>
		</ol>
		<div class="tabs-content winners-list">
			<table>
				<thead>
					<tr>
						<th>昵称</th>
						<th>奖项</th>
						<th>奖品</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>小公举</td>
						<td>一等奖</td>
						<td>X.XM</td>
					</tr>
					<tr>
						<td>小公举</td>
						<td>一等奖</td>
						<td>X.XM</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="adv-area">
		<img src="css/images/1.jpg"/>
	</div>
</section>
<script type="text/javascript">
	$(document).ready(function(){
		var roll = function() {
			$(this).unbind("click", roll);
			var rotation = 360;// 后台获取到的旋转角度
			var angle = 0;
			var that = this;
			that.rotateIntervel = setInterval(function() {
				angle += 15;
				$("#jq-turntable-img").rotate(angle);
				if (angle >= rotation) {
					clearInterval(that.rotateIntervel);
					// 抽奖结果
					$.mobAlert("谢谢参与！");
				}
			}, 50);
		}
		$("#jq-turntable-tip").bind("click", roll);
		$('.tabs li').on('click',function(){
			var idx = $(this).index();
			$('.tabs li').removeClass('current');
			$(this).addClass('current');
			$('.tabs-content').hide();
			$('.tabs-content').eq(idx).show();
		});
	});
	document.onselectstart = new Function("event.returnValue=false;");
	document.oncontextmenu = new Function("event.returnValue=false;");
</script>
</body>

</html>
